<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webuploader文件上传页面</title>		
 	<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" ></link>
    <link rel="stylesheet" href="/static/plugins/webuploader/webuploader.css"/>
  	<link rel="stylesheet" href="/static/common/common.css"/>		
</head>                 
<body class="body-container">	
    <div>           
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>webuploader文件上传222111</legend>
        </fieldset> 
    </div>
    
    <!--dom结构部分-->  
    <div id="uploader-demo">
        <!--用来存放item--> 
        <div id="fileList" class="uploader-list "></div>
        <div id="filePicker">选择图片</div>
    </div>	
   
<script type="text/javascript" src="/static/jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/static/layui/layui.all.js"></script>			
<script type="text/javascript" src="/static/plugins/webuploader/webuploader.js"></script>
<script type="text/javascript">    
    // 初始化Web Uploader   
    var uploader = WebUploader.create({

        // 选完文件后，是否自动上传。
        auto: true,

        // swf文件路径
        swf: './../static/plugins/webuploader/Uploader.swf',

        // 文件接收服务端。
        server: '/upload/webuploader',

        // 选择文件的按钮。可选。   
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#filePicker',    

        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png,mp4'
           // mimeTypes: 'image/*'
        },  
        fileVal:"file", // [默认值：'file'] 设置文件上传域的name。  
        fileNumLimit: 8, //限制上传个数
        fileSingleSizeLimit: 2048000, //限制单个上传图片的大小
        compress: false, //webuploader默认压缩图片,设置compress:false，可以按照原始比例上传图
		chunked: false, //是否要分片处理大文件上传  
		duplicate: false, //是否支持重复上传 	 
		fileSizeLimit: 200 * 1024 * 1024, // 2000 * 1024 * 1024 最大2GB   
		//chunkSize:2*1024*1024, 				//分片上传，每片2M，默认是5M
		auto: true, // 选完文件后，是否自动上传。	    
		//fileVal:"file", 						// [默认值：'file'] 设置文件上传域的name。  
		fileNumLimit: 1 //限制上传个数	
		//fileSingleSizeLimit: 2048000 			//限制单个上传图片的大小
    });

    // 当有文件添加进来的时候
    uploader.on( 'fileQueued', function( file ) {
        var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                    '<img>' +
                    '<div class="info">' + file.name + '</div>' +
                '</div>'
                ),  
            $img = $li.find('img');
        //var list=("#fileList");     
        // $list为容器jQuery实例
        $("#filePicker").append( $li );

        // 创建缩略图
        // 如果为非图片文件，可以不用调用此方法。
        // thumbnailWidth x thumbnailHeight 为 100 x 100
        var thumbnailWidth = 100;
        var thumbnailHeight =100;   
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }

            $img.attr( 'src', src );
        }, thumbnailWidth, thumbnailHeight );
    });

    // 文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
        var $li = $( '#'+file.id ),
            $percent = $li.find('.progress .progress-bar');

        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $('<div class="progress progress-striped active">' +
            '<div class="progress-bar" role="progressbar" style="width: 0%">' +
            '</div>' +
            '</div>').appendTo( $li ).find('.progress-bar');
        }

        $li.find('p.state').text('上传中');
        console.log(percentage * 100 + '%');

        $percent.css( 'width', percentage * 100 + '%' );
    });


    uploader.on( 'uploadSuccess', function( file ) {
        $( '#'+file.id ).find('p.state').text('已上传');
    }); 

    uploader.on( 'uploadError', function( file ) {
        $( '#'+file.id ).find('p.state').text('上传出错');
    });

    uploader.on( 'uploadComplete', function( file ) {
        $( '#'+file.id ).find('.progress').fadeOut();
    });
</script>
</body>
</html>